<template>
  <div class="wrap">
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{$t('message.WingSurfaceDesign.wingFormat')}}：</label>
      <el-select v-model.number="params.wingFormat" @change="changeWingFormat()">
        <el-option
          v-for="item in wingFormatList"
          :key="item.value"
          :label="item.text"
          :value="item.value"/>
      </el-select>
    </div>
    <!--机翼面积-->
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{$t('message.WingSurfaceDesign.wingArea')}}：</label>
      <el-input v-model="params.wingArea"
                :disabled="false"
                type = "number"
                step = "1"
                min = "10"
                max = "90"/>
      <label class="label">m²</label>
    </div>
    <!--展弦比-->
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{$t('message.WingSurfaceDesign.aspectRatio')}}：</label>
      <el-input v-model="params.aspectRatio"
                :disabled="false"
                type = "number"
                step = "1"
                min = "10"
                max = "90"/>
    </div>
    <!--矩形翼的时候只有机翼面积和展弦比-->
    <template v-if="params.wingFormat !== 0">
      <!--后掠角-->
      <div class="d-flex align-items-center">
        <label class="el-form-item__label">{{$t('message.WingSurfaceDesign.sweepBack')}}：</label>
        <el-input v-model="params.sweepBack"
                  :disabled="false"
                  type = "number"
                  step = "1"
                  min = "10"
                  max = "90"/>
        <label class="label">°</label>
      </div>
      <!--三角翼无根梢比-->
      <template v-if="params.wingFormat !== 3">
        <div class="d-flex align-items-center">
          <label class="el-form-item__label">{{$t('message.WingSurfaceDesign.rootRealRatio')}}：</label>
          <el-input v-model="params.rootRealRatio"
                    :disabled="false"
                    type = "number"
                    step = "1"
                    min = "10"
                    max = "90"/>
        </div>
      </template>
      <!--平均气动弦长-->
      <div class="d-flex align-items-center">
        <label class="el-form-item__label">{{$t('message.WingSurfaceDesign.aveChordLength')}}：</label>
        <el-input v-model="params.aveChordLength"
                  :disabled="false"
                  type = "number"
                  step = "1"
                  min = "10"
                  max = "90"/>
        <label class="label">mm</label>
      </div>
    </template>
    <div class="btn">
      <el-button
        type="primary"
        size="small"
        :disabled="false"
        @click="confirm">
        {{ $t('message.WingProfileDesignDlg.confirm') }}
      </el-button>
      <el-button
        size="small"
        @click="close">
        {{ $t('message.WingProfileDesignDlg.cancel') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import DialogMixin from "../DialogMixin";
import {wingSurfaceDesignCommand} from "../../../Command/WingSurfaceDesign/WingSurfaceDesignCommand";

export default {
  mixins: [DialogMixin],
  data: function() {
    return {
      params: {
        wingFormat:0,                     //机翼样式
        wingArea:0,                       //机翼面积
        aspectRatio:0,                    //展弦比
        sweepBack:0,                      //后掠角
        rootRealRatio:0,                  //根梢比
        aveChordLength:0,                 //平均气动弦长
      },
      wingFormatList: [
        {text: this.$t("message.WingSurfaceDesign.wingFormatRectangle"), value: 0},
        {text: this.$t("message.WingSurfaceDesign.wingFormatTrapezoid"), value: 1},
        {text: this.$t("message.WingSurfaceDesign.wingFormatSwept"), value: 2},
        {text: this.$t("message.WingSurfaceDesign.wingFormatTriangle"), value: 3},
      ],
    };
  },

  mounted() {
    //进行初始化之前，应该先让用户选择一个平面作为草图的基准面
    //设置当前命令时已经处理。
    wingSurfaceDesignCommand.init(400,300,270,() => {
      this.preview();
    });
  },

  methods: {
    changePluginContainerHeight() {
      wingSurfaceDesignCommand.changePluginContainerHeight({
        minWidth: this.$el.clientWidth,
        maxHeight: this.$el.clientHeight
      });
    },
    confirm: function () {

    },

    close() {
      wingSurfaceDesignCommand.closeActiveCmd();
    },
    preview() {

    },
    changeWingFormat(){
      this.preview();
    },
    watch: {
      "params.deformElements": function () {
        this.preview();
      },

    },
  }
};
</script>
<style scoped>
.wrap {
    font-size: 12px;
}
.query-description {
    height: 24px;
    font-size: 12px;
    line-height: 24px;
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    margin-top: 3px;
}
/*.label {*/
/*    max-width: 100px;*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*}*/
.result-list {
    padding: 2px 10px;
    max-height: 180px;
    overflow-y: auto;
}

.result-item {
    margin: 1px 0;
    padding: 2px 0 2px 4px;
    display: flex;
    align-items: center;
}

.result-item .angle-icon {
    font-weight: bold;
    padding: 0 2px;
}

.result-item-title {
    flex-grow: 1;
}

.ident {
    padding-left: 14px;
}

.selected-query-li {
    border-radius: 3px;
    background-color: var(--bg-color3);
}
</style>
